<template>
  <div>
    <el-tree 
    ref="tree"
    node-key="id"
    show-checkbox
    default-expand-all
    check-strictly
    :data="treeList" :props="{label:'name'}"/>
    <div style="text-align: right">
      <el-button @click="quxiao">取消</el-button>
      <el-button type="primary" @click="queding">确定</el-button>
    </div>
  </div>
</template>

<script>
    import { getPermissionList } from '@/api/permissions'
    import {translation} from '@/utils/index'
    import {getRolesDetail,assignPrem} from '@/api/settings'
export default {
    props:{
      id:{
      type:String,
      required:true
    }
    },
    data() {
        return {
          treeList:[],

        }
    },
    created(){
     this.loadPermissionList()
    },
 methods:{
  // 更新数据
   async queding(){
    const permIds = this.$refs.tree.getCheckedKeys()
   const res = await assignPrem({id:this.id,permIds:permIds})
   this.$message.success(res.message)
   this.$emit('success')
  },
  // 获取数据
    async loadPermissionList(){
      try {
        const res = await getPermissionList()
        console.log('getPermissionList', res)
        this.treeList = translation(res.data) 
        const info = await getRolesDetail(this.id)
        // 让当前角色拥有的权限,处于选中状态
         this.$refs.tree.setCheckedKeys(info.data.permIds)
       
        // 保存数据 
      } catch (err) {
        console.log('getPermissionList', err)
      }
    },
 // 取消按钮
 quxiao(){
  this.$emit('success')
}
}
};
</script>

<style>
</style>